<template>
  <div class="p-4">
    <GrowCard :loading="loading" class="enter-y" />
    <div style="margin-top: 20px;font-size: 16px">
      你好，{{ userInfo.realName }}，现在时间：{{time}}
    </div>
<!--    <IndexTable class="!my-4 enter-y" :loading="loading" />-->
<!--    <div class="md:flex enter-y">-->
<!--      <VisitRadar class="md:w-1/3 w-full" :loading="loading" />-->
<!--      <VisitSource class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />-->
<!--      <SalesProductPie class="md:w-1/3 w-full" :loading="loading" />-->
<!--    </div>-->
<!--    <div style="margin-top:50px">-->
<!--      <a-card title="说明" style="width: 800px">-->
<!--        <template #extra><a href="#"></a></template>-->
<!--        <a-alert-->
<!--          message="警告"-->
<!--          description="当前展示的是开发测试环境，不代表最终版本"-->
<!--          type="error"-->
<!--          closable-->
<!--        />-->
<!--        <a-alert message="支持的浏览器及版本：edge微软浏览器：90，chrome谷歌浏览器:90，firefox火狐浏览器:90，safari苹果浏览器:15，当前Chrome最新版本为100" type="success" />-->
<!--        <a-alert message="本系统仅保证在最新的电脑端谷歌浏览器下正常运行。360浏览器等国产一般为套壳谷歌浏览器62版本左右，版本太旧可能会有兼容问题。不兼容IE浏览器。" type="info" />-->
<!--        <p style="margin-top: 20px">正在开发内容：</p>-->
<!--        <a-list item-layout="horizontal" :data-source="data">-->
<!--          <template #renderItem="{ item,index }">-->
<!--            <p>{{index+1}}.{{ item.title }}</p>-->
<!--          </template>-->
<!--        </a-list>-->
<!--      </a-card>-->

<!--    </div>-->
  </div>
</template>
<script lang="ts">
  import {defineComponent, ref } from 'vue';
  import IndexTable from './components/IndexTable.vue';
  import GrowCard from './components/GrowCard.vue';
  import SiteAnalysis from './components/SiteAnalysis.vue';
  import VisitSource from './components/VisitSource.vue';
  import VisitRadar from './components/VisitRadar.vue';
  import SalesProductPie from './components/SalesProductPie.vue';
  import {message, Row,Card,List,ListItem,Avatar} from 'ant-design-vue';
  import { getUserInfo } from '/@/api/sys/user';

  interface DataItem {
    title: string;
  }
  const data: DataItem[] = [
    {
      title: '微信消息通知',
    },
    {
      title: '教师完成情况统计和导出功能',
    },
  ];

  const loading = ref(true);
  const time = ref('');
  const userInfo = ref({
    realName:''
  });
  time.value = getNowTime();

  function getNowTime() {
    const date = new Date();
    //年 getFullYear()：四位数字返回年份
    const year = date.getFullYear();  //getFullYear()代替getYear()
    //月 getMonth()：0 ~ 11
    const month = date.getMonth() + 1;
    //日 getDate()：(1 ~ 31)
    const day = date.getDate();
    //时 getHours()：(0 ~ 23)
    const hour = date.getHours();
    //分 getMinutes()： (0 ~ 59)
    const minute = date.getMinutes();
    //秒 getSeconds()：(0 ~ 59)
    const second = date.getSeconds();
    const time = '当前时间是：' + year + '-' + addZero(month) + '-' + addZero(day) + ' ' + addZero(hour) + ':' + addZero(minute) + ':' + addZero(second);
    return time;
  }
  //小于10的拼接上0字符串
  function addZero(s) {
    return s < 10 ? ('0' + s) : s;
  }


  setTimeout(() => {
    loading.value = false;
  }, 1500);

  export default defineComponent({
    components:{
      GrowCard,
      IndexTable,
      SiteAnalysis,
      VisitSource,
      VisitRadar,
      SalesProductPie},
    mounted() {
      getUserInfo().then(res=>{
        console.log('userinfo',res)
        userInfo.value = res
      })
      setInterval(()=>{
        time.value = getNowTime();
      }, 1000);
    },
    setup() {
      return {
        data,time,userInfo
      };
    },
  });
</script>
